<template>
	<view class="check-ticket-container">
		<!-- 可验票项目 -->
		<view class="section">
			<view class="section-title">可验票项目</view>
			<view class="ticket-projects">
				<view v-for="(project, index) in ticketProjects" :key="index" class="project-item">
					<text>{{ project }}</text>
				</view>
			</view>
		</view>

		<!-- 验票信息 -->
		<view class="section">
			<view class="section-title">验票信息</view>
			<view class="ticket-info">
				<view class="info-item">
					<text class="info-label">套票名称：</text>
					<text class="info-value">{{ ticketInfo.packageName }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">游玩项目：</text>
					<text class="info-value">{{ ticketInfo.playProject }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">单次可用：</text>
					<text class="info-value">{{ ticketInfo.availableCount }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">单次有效期：</text>
					<text class="info-value">{{ ticketInfo.validityPeriod }}</text>
				</view>
			</view>
		</view>

		<!-- 确认验票按钮 -->
		<view class="button-container">
			<button class="confirm-button" @click="confirmCheckTicket">确认验票</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 可验票项目列表
				ticketProjects: ['闸机1', '闸机2', '闸机3'],

				// 验票信息
				ticketInfo: {
					packageName: '10次票',
					playProject: '闸机1',
					availableCount: 2,
					validityPeriod: '1小时'
				}
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('title.checkTicket')
			});
		},
		methods: {
			// 确认验票
			confirmCheckTicket() {
				// 这里可以添加验票的逻辑，比如调用API等
				uni.showToast({
					title: '验票成功',
					icon: 'success'
				});
			}
		}
	}
</script>

<style scoped>
	.check-ticket-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 通用区域样式 */
	.section {
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 20rpx;
	}

	/* 可验票项目 */
	.ticket-projects {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.project-item {
		padding: 15rpx 30rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #666;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}



	/* 验票信息 */
	.ticket-info {
		background-color: #fafafa;
		padding: 15rpx;
		border-radius: 8rpx;
	}

	.info-item {
		display: flex;
		padding: 15rpx 0;
		font-size: 28rpx;
	}

	.info-label {
		color: #666;
		width: 160rpx;
	}

	.info-value {
		color: #333;
		flex: 1;
	}

	/* 确认按钮 */
	.button-container {
		margin-top: 40rpx;
		padding: 0 20rpx;
	}

	.confirm-button {
		background-color: #ff4444;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		border-radius: 8rpx;
		padding: 25rpx 0;
		border: none;
		width: 100%;
	}

	.confirm-button:active {
		background-color: #e03333;
	}
</style>